<template>
  <!-- 订单管理 -->
  <view class="content">
    <view class="main-bgColor">
      <uni-search-bar
        placeholder="请输入手机号码"
        @confirm="search"
        @blur="search"
        @cancel="cancel"
        @clear="cancel"
        v-model="state.param.mobileNum"
      ></uni-search-bar>
    </view>

    <view class="ui-tab flex bg-white fz26">
      <view
        class="li flex1 t-c"
        v-for="item in tabOptions"
        :key="item.value"
        @click="onTab(item)"
      >
        <text class="text" :class="state.curId === item.value ? 'cur' : ''">{{
          item.label
        }}</text>
      </view>
    </view>

    <!-- <view class="no-data t-c">
      <image class="img" src="../../static/no-data.svg"></image>
      <view class="gray9 fz28">暂无订单</view>
    </view> -->

    <view class="list">
      <view
        class="item bg-white"
        v-for="item in state.dataSource"
        :key="item.id"
        @click="$jump.navigateTo(`/pages/order/details?id=${item.orderId}`)"
      >
        <view class="tit flex flex-y-center fz28 gray3">
          <view class="flex1">订单号：{{ item.orderId }}</view>
          <view class="ml10 main-theme-color">{{
            $filter.filterDictText(state.orderStatusOptions, item.orderStatus)
          }}</view>
        </view>
        <view class="flex flex-y-center fz26 gray9">
          <view class="flex1">{{ item.wechatName }}</view>
          <view>网点：{{ item.networkName }}</view>
        </view>
        <view class="flex flex-y-center fz26 gray9">
          <view class="flex1">设备：{{ item.deviceId }}</view>
          <view>{{ item.cellOtherName }}</view>
        </view>
        <view class="flex flex-y-center fz26 gray9">
          <view class="flex1"
            >订单金额：￥{{ $filter.formatYuan(item.orderAmount) }}</view
          >
          <view
            >计费方式：{{
              $filter.filterDictText(state.chargeTypeOptions, item.chargeType)
            }}</view
          >
        </view>
        <view class="flex flex-y-center fz26 gray9">
          <view class="flex1"
            >支付金额：￥{{ $filter.formatYuan(item.actualAmount) }}</view
          >
          <view>{{ item.createTime }}</view>
        </view>

        <view class="flex flex-y-center flex-x-end mt20">
          <button
            class="btn main-bgColor fff"
            size="mini"
            v-if="item.orderStatus === 2"
            @click.stop="onClose(item)"
          >
            强制关闭
          </button>
          <button class="btn btn-black" size="mini">查看详情</button>
        </view>
      </view>
    </view>

    <uni-load-more :status="mix.loading"></uni-load-more>
  </view>
</template>

<script setup>
import minix from "@/common/js/mixin.js";
import { reactive, getCurrentInstance } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import {
  getOrderList,
  initDictOptions,
  closeOrder,
} from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();
const { mix } = minix();
const state = reactive({
  curId: "1",
  param: {
    mobileNum: "",
    startTime: "",
    newEndTime: "",
  },
  dataSource: [],
  orderStatusOptions: [],
  chargeTypeOptions: [],
});

const tabOptions = [
  {
    label: "今日",
    value: "1",
    startTime: proxy.$filter.getToday()[0],
    endTime: proxy.$filter.getToday()[1],
  },
  {
    label: "昨日",
    value: "2",
    startTime: proxy.$filter.getYesterday()[0],
    endTime: proxy.$filter.getYesterday()[1],
  },
  {
    label: "本周",
    value: "3",
    startTime: proxy.$filter.getThisWeek()[0],
    endTime: proxy.$filter.getThisWeek()[1],
  },
  {
    label: "本月",
    value: "4",
    startTime: proxy.$filter.getThisMonth()[0],
    endTime: proxy.$filter.getThisMonth()[1],
  },
];

// 初始化数据字典
const initDictConfig = () => {
  //初始化字典 - 订单状态
  initDictOptions("orderStatus", {}, { showLoad: false }).then((res) => {
    if (res.success) {
      state.orderStatusOptions = res.result;
    }
  });
  //初始化字典 - 计费方式
  initDictOptions("billingMethod", {}, { showLoad: false }).then((res) => {
    if (res.success) {
      state.chargeTypeOptions = res.result;
    }
  });
};

// 获取数据
const loadData = (page) => {
  if (mix.isSend) {
    return;
  }
  mix.isSend = true;
  mix.loading = "loading";
  if (page >= 0) {
    mix.query.pageNo = page;
  }
  if (page === 1) {
    state.dataSource = [];
  }
  const data = { ...mix.query, ...state.param };
  getOrderList(data)
    .then((res) => {
      state.dataSource = state.dataSource.concat(res.result.records);
      mix.query.pageNo++;
      if (
        !res.result.records ||
        res.result.records.length < mix.query.pageSize
      ) {
        mix.loading = "noMore";
      } else {
        mix.loading = "more";
      }
    })
    .finally(() => {
      mix.isSend = false;
    });
};

// tab切换
const onTab = (e) => {
  state.curId = e.value;
  state.param.startTime = e.startTime;
  state.param.newEndTime = e.endTime;
  loadData(1);
};

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  initDictConfig();
  onTab(tabOptions[0]);
});

// 页面滚动到底部
onReachBottom(() => {
  if (mix.loading === "noMore") return;
  loadData();
});

// 搜索
const search = (e) => {
  loadData(1);
};

// 关闭订单
const onClose = (item) => {
  uni.showModal({
    title: "提示",
    content: "确定要关闭该订单吗？",
    success(res) {
      if (res.confirm) {
        const data = { orderId: item.orderId };
        closeOrder(data).then((res) => {
          uni.showToast({
            title: "关闭成功！",
          });
          item.orderStatus = 6;
        });
      }
    },
  });
};

// 搜索取消
const cancel = () => {};
</script>

<style lang="less" scoped>
@import url("@/common/less/common.less");

.ui-tab {
  .text {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 30rpx 0;
  }
  .cur {
    color: @main-theme-color;
    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4rpx;
      background: @main-theme-color;
    }
  }
}

.list {
  padding: 0 20rpx;
  .item {
    padding: 30rpx 0;
    margin: 20rpx 0;
    border-radius: 20rpx;
    box-shadow: 0 5rpx 10rpx rgba(#000, 0.1);
    line-height: 2;
    > .flex {
      padding: 0 30rpx;
    }
    .tit {
      border-bottom: 2rpx solid @line;
      padding-bottom: 10rpx;
      margin-bottom: 10rpx;
    }
    .btn {
      margin: 0 2rpx 0 20rpx;
    }
  }
}
</style>
